/**
  less中,使用 @变量名 : 值;来定义变量
 */
@form-width: 654px;
@input-width: 550px;
@camera-height: 20px;
@login-footer-height: 56px;
@login-header-height: 400px - @login-footer-height;
@baidu-login-width: 800px;
@baidu-login-height: 400px;

html {
  transition: filter 0.3s;
  filter: grayscale(1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix() {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

/**
 less和css很相似,但是加了嵌套的功能,使用嵌套代替层叠或与层叠结合使用,使代码看起来更清晰

 嵌套:
    #header {
      //嵌套内部直接写子元素,并且可以加上 > , + , ~
      // &代表当前选择器的父级,通过 &:xxx 来指定伪类和伪元素
      color: black;
      >.navigation {
        font-size: 12px;
      }
      .logo {
        width: 300px;
      }
      &:hover{
        background-color:red;
      }
    }

    //编译结果
    #header {
      color: black;
    }
    #header > .navigation {
      font-size: 12px;
    }
    #header .logo {
      width: 300px;
    }
    #header:hover{
      background-color:red;
    }
 */

.login-float-layer {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;

  .baidu-login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: @baidu-login-width;
    height: @baidu-login-height;
    border-radius: 20px;
    background-color: white;

    > .login-header {
      position: absolute;
      width: 100%;
      height: @login-header-height;

      > .login-header-left {
        position: absolute;
        left: 0;
        width: calc(@baidu-login-width / 2);
        height: 100%;

        > .header {
          position: absolute;
          left: 30px;
          top: 0;
          width: 100px;
          height: 50px;
          background-image: url("../img/logo.png");
          background-size: 100% 100%;
        }

        > .footer {
          position: absolute;
          top: 50px;
          width: 100%;
          height: calc(@baidu-login-height - 106px);

          > .baidu-photo {
            position: absolute;
            width: 100%;
            height: 180px;

            div {
              position: absolute;
              width: 160px;
              height: 160px;
              border: 1px solid #eee;
              border-radius: 10px;

              > .img {
                width: 140px;
                height: 140px;
                margin: 10px;
                background-size: 100% 100%;
              }
            }

            > .qrcode {
              left: 5%;
              top: 5%;

              > .img {
                background-image: url("../img/login-qrcode.png");
              }
            }

            > .phone-login {
              right: 5%;
              top: 5%;

              > .img {
                background-image: url("../img/PhoneQrcodeLogin.png");
              }
            }
          }

          > .text {
            position: absolute;
            bottom: 25%;
            width: 100%;
            font-size: 20px;
            text-align: center;
          }

          > .download-baidu {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 5%;
            width: 140px;
            height: 35px;
            background-color: #eeeeee;
            border-radius: 10px;

            a {
              display: block;
              text-align: center;
              line-height: 35px;
              text-decoration: none;
              color: #2b88f0;
            }

            > .download-qrcode-layer {
              display: none;
              position: absolute;
              left: -98px;
              bottom: 40px;
              width: 340px;
              height: 270px;
              background-color: white;
              box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
              border-radius: 10px;

              > .qrcode {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 10%;
                width: 170px;
                height: 170px;
                border: 1px solid #eee;
                border-radius: 10px;

                > .img {
                  width: 150px;
                  height: 150px;
                  margin: 10px;
                  background-image: url("../img/login-qrcode.png");
                  background-size: 100% 100%;
                }
              }

              > .text {
                position: absolute;
                bottom: 8%;
                left: 50%;
                transform: translateX(-50%);
                width: 180px;
                height: 30px;
                text-align: center;
                line-height: 30px;
              }
            }

            &:hover {
              > .download-qrcode-layer {
                display: block;
              }
            }
          }
        }
      }

      > .login-header-right {
        position: absolute;
        left: 50%;
        width: calc(@baidu-login-width / 2);
        height: 100%;

        > .close-header {
          position: absolute;
          right: 20px;
          top: 20px;
          width: 21px;
          height: 21px;
          cursor: pointer;
          background-image: url("../img/close.png");
          background-size: 100% 100%;
        }

        > .from-body {
          > .choose-login {
            width: 100%;
            .clearfix();

            div {
              float: left;
              cursor: pointer;
              font-size: 18px;
              color: gray;
              margin-left: 20px;
              margin-top: 40px;

              &.active {
                color: black;

                &:after {
                  display: block;
                  content: "";
                  width: 90%;
                  margin-top: 5%;
                  margin-left: 5%;
                  height: 2px;
                  background-color: #4e6ef2;
                }
              }
            }
          }

          > .account,
          .note {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: #2b88f0;
          }

          > .login-btn {
            position: absolute;
            bottom: 50px;
            right: 40px;
            width: 336px;
            height: 48px;
            text-align: center;
            line-height: 48px;
            font-size: 17px;
            color: white;
            background-color: #4e6ef2;
            border-radius: 10px;
            box-shadow: 0 6px 16px 0 rgb(78 111 242 / 30%);
            cursor: pointer;

            &:hover {
              background-color: #4662d9;
            }
          }

          > .text {
            position: absolute;
            bottom: 10px;
            left: 13%;
            font-size: 14px;
            color: gray;

            a {
              color: #4e6ef2;
              text-decoration: none;
            }
          }
        }
      }
    }

    > .login-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: @login-footer-height;
      border-top: 1px solid #eee;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      > .left {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        div {
          position: relative;
          top: 10px;
          left: 20px;
          margin-right: 16px;
          width: 30px;
          height: 30px;
          cursor: pointer;
        }

        > .qq {
          background-image: url("../img/qq-icon.png");
          background-size: 100% 100%;
        }

        .weibo {
          background-image: url("../img/weibo-icon.png");
          background-size: 100% 100%;
        }

        .wechat {
          background-image: url("../img/wechat-icon.png");
          background-size: 100% 100%;
        }
      }

      > .right {
        width: 70px;
        height: 30px;
        position: relative;
        top: 16px;
        right: 30px;

        a {
          color: #2b88f0;
          text-decoration: none;
        }
      }
    }
  }
}

.header {
  width: 100%;
  height: 40px;
  font-size: 13px;
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  > .left {
    margin-left: 20px;
    display: inline-block;

    a {
      text-decoration: none;
      margin-right: 24px;
      color: black;

      &:hover {
        color: skyblue;
      }
    }
  }

  .change-color-btn {
    z-index: 20;
    transform: translateX(-100%);
    width: 160px;
    height: 50px;
    display: flex;
    justify-content: flex-start;

    > .text {
      width: 100px;
      line-height: 30px;
      font-size: 1rem;
    }

    > .button {
      position: relative;
      cursor: pointer;

      > .bottom-ellipse {
        width: 60px;
        height: 30px;
        border-radius: 100px;
        background-color: gray;
        transition: background-color 0.3s ease-in;
      }

      > .circle {
        position: absolute;
        left: 0px;
        top: 0;
        margin: 2px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: white;
        transition: left 0.3s ease-in;
      }
    }
  }

  > .right {
    margin-right: 30px;
    cursor: pointer;

    > .setting {
      display: inline-block;
      margin-right: 30px;

      > .float-dialog {
        display: none;
        position: absolute;
        right: 87px;
        top: 33px;
        width: 84px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

        > div {
          margin: 3px 16px 3px 16px;
          cursor: pointer;

          &:hover {
            color: skyblue;
          }
        }

        > hr {
          margin: 3px 16px 3px 16px;
          opacity: 0.7;
        }

        &:hover {
          display: inline-block;
        }
      }

      &:hover {
        color: skyblue;

        > .float-dialog {
          display: inline-block;
          color: black;
        }
      }
    }

    > .login {
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
      color: white;
      background-color: rgb(94, 94, 252);
      cursor: pointer;
      border-radius: 10px;

      &:hover {
        background-color: blue;
      }
    }
  }
}

.baidu-body {
  // width: 100%;
  margin-top: 20px;
  position: relative;

  > .baidu-logo {
    display: flex;
    flex-direction: row;
    justify-content: center;

    a {
      > .logo {
        width: 270px;
        height: 129px;
        background-image: url(../img/logo.png);
        background-size: 100% 100%;
      }
    }
  }

  > .input-from {
    display: flex;
    flex-direction: row;
    justify-content: center;

    > .from {
      width: @form-width;
      height: 44px;
      position: relative;

      > .input {
        position: absolute;
        left: 0;
        width: @input-width;
        display: inline-block;
        padding: 12px 0 12px 12px;
        border-radius: 10px 0 0 10px;
        border: 2px solid gray;
        outline: none;

        &:focus {
          border: 2px solid blue;
        }
      }

      > .clear-input {
        display: none;
        position: absolute;
        top: 30%;
        left: 485px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        background-image: url("../img/close.png");
        background-size: 100%, 100%;
      }

      > .camera {
        position: absolute;
        right: calc(@form-width - @input-width + @camera-height);
        top: 12px;
        width: 24px;
        height: @camera-height;
        background-image: url(../img/camera.png);
        background-size: 100% 100%;
        cursor: pointer;

        &:active {
          transform: scale(0.93);
        }
      }

      > .submit-btn {
        position: absolute;
        left: calc(@input-width - 2px);
        width: calc(@form-width - @input-width);
        height: 43.35px;
        border: 0;
        border-radius: 0 10px 10px 0;
        color: white;
        background-color: #4e6ef2;
        font-size: 1rem;
        cursor: pointer;

        &:hover {
          background-color: blue;
        }
      }

      .crmera-dialog {
        display: none;
        position: absolute;
        z-index: 10;
        top: 50px;
        width: 654px;
        height: 154px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);

        > .photo {
          position: absolute;
          left: 20px;
          top: 20px;
          width: 604px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          border: 1px dashed gray;
          color: gray;
        }

        > .select-file {
          position: absolute;
          left: 50%;
          top: 70%;
          transform: translateX(-50%);
          width: 80px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 5px;
          font-size: 13px;
          color: white;
          background-color: rgb(77, 77, 245);
          cursor: pointer;
        }

        > .close {
          position: absolute;
          bottom: 10px;
          right: 10px;
          width: 18px;
          height: 18px;
          text-align: center;
          line-height: 18px;
          color: gray;
          cursor: pointer;
          background-image: url("../img/close.png");
          background-size: 100%, 100%;

          &:hover {
            color: rgb(77, 77, 245);
          }
        }
      }
    }
  }

  > .hotSearch {
    position: absolute;
    left: 50%;
    margin-top: 50px;
    transform: translateX(-50%);
    width: 654px;
    height: 500px;

    > .hotSearch-header {
      height: 25px;

      #baidu-search {
        text-decoration: none;
        color: black;
        font-weight: bold;
        float: left;

        &:hover {
          color: skyblue;
        }
      }

      #change {
        cursor: pointer;
        float: right;

        &:hover {
          color: skyblue;
        }
      }
    }

    > .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      > .item {
        height: 36px;
        text-align: left;
        line-height: 36px;

        > .num {
          color: gray;
        }

        > .num1 {
          color: red;
        }

        > .num2 {
          color: rgb(233, 58, 58);
        }

        > .num3 {
          color: orange;
        }
      }
    }
  }

  > .declare-partiton {
    position: absolute;
    left: 50%;
    top: 300%;
    transform: translateX(-50%);
    width: 1200px;
    height: 300px;
    border: 1px solid red;

    > h1 {
      text-align: center;
    }

    > .source-repository {
      position: absolute;
      top: 50%;
      left: 10%;
    }

    > .source-btn {
      position: absolute;
      top: 50%;
      right: 10%;
      width: 150px;
      height: 40px;
      border-radius: 10px;
      background-color: #7d5fff;
      transition: transform 0.5s;

      a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        color: orange;
      }

      &:hover {
        transform: scale(0.95);
      }
    }
  }
}

.footer {
  width: 1600px;
  height: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  > a {
    float: left;
    text-decoration: none;
    font-size: 12px;
    margin: 0 5px;
    color: gray;
  }

  > svg {
    width: 20px;
    height: 20px;
    cursor: pointer;

    &:hover {
      + .about-baidu {
        display: block;
      }
    }
  }

  > .about-baidu {
    display: none;
    position: absolute;
    right: 0;
    top: -130%;
    width: 442px;
    height: 41px;
    text-align: center;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
}

.footer-right-float-layer {
  position: fixed;
  right: 24px;
  bottom: 64px;
  width: 44px;
  height: 88px;

  > .assist-pattern,
  .qrcode {
    position: relative;
    margin: 5.5px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    cursor: pointer;

    > .img {
      width: 100%;
      height: 100%;
      background-image: url(../img/assist.png);
      background-size: 100% 100%;
    }

    &:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
  }

  > .assist-pattern {
    > .hide-dialog {
      display: none;
      position: absolute;
      right: 52px;
      top: 0;
      width: 84px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    &:hover {
      > .hide-dialog {
        display: block;
      }
    }
  }

  > .qrcode {
    > .img {
      background-image: url(../img/qrcode-icon.png);

      &:hover {
        + .qrcode-dialog {
          display: block;
        }
      }
    }

    > .qrcode-dialog {
      display: none;
      position: absolute;
      bottom: 0;
      right: 56px;
      width: 300px;
      height: 107px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);

      > .text-left {
        position: absolute;
        width: 200px;
        height: 100%;
        padding: 15px;

        > .login-text {
          font-size: 20px;
        }

        > .login-info {
          color: gray;
          font-size: 14px;
        }
      }

      > .qrcode-right {
        position: absolute;
        right: 0;
        width: 100px;
        height: 100%;
        padding: 10px;

        > .img {
          width: 100%;
          height: 100%;
          background-image: url(../img/footer-qrcode.png);
          background-size: 100% 100%;
        }
      }
    }
  }
}
